<template>
  <div class="page-box">
    <div class="body-box">
      <div class="echart-box">
        <div class="btn-box">
          <el-checkbox class="checkbox-item" v-model="config.runState"
            >运行过程</el-checkbox
          >
          <el-checkbox class="checkbox-item" v-model="config.startState"
            >开机过程</el-checkbox
          >
          <el-checkbox class="checkbox-item" v-model="config.endState"
            >停机过程</el-checkbox
          >
        </div>
        <div class="echart-chart-box">
          <BaseEcharts :options="options" :initedFunction="initedFunction" />
        </div>
      </div>
      <div class="point-box">
        <div class="check-title">
          <span> 请选择特征指标： </span>
          <el-button @click="checkAll" style="float: right">全选</el-button>
          <el-button @click="reCheck" style="float: right; marginright: 10px"
            >反选</el-button
          >
        </div>
        <div class="check-box">
          <div
            class="check-item"
            v-for="item in selectData"
            :key="item.name"
            @click="checkPointChange(item)"
          >
            <div
              class="color-box"
              :style="{
                backgroundColor: item.isCheck ? item.color : 'gray',
              }"
            ></div>
            <div
              class="name-box"
              :style="{
                color: item.isCheck ? '#004896' : 'gray',
              }"
            >
              {{ item.name }}
            </div>
          </div>
        </div>

        <!-- <el-checkbox-group v-model="checkPointList">
          <el-checkbox label="复选框 A"></el-checkbox>
        </el-checkbox-group> -->
      </div>
    </div>
  </div>
</template>

<script>
import BaseEcharts from "@/views/package/echarts/components/BaseEcharts";
import { getOptions } from "./customOptions4";
export default {
  components: {
    BaseEcharts,
  },
  data() {
    return {
      options: null,
      config: {
        runState: true, // 运行过程
        startState: false, // 开机过程
        endState: false, // 停机过程
      },
      chart: null,
      selectData: [],
      checkPointList: [],
    };
  },
  methods: {
    getData() {
      const stMin = 150;
      const stMax = 230;
      const ygMin = 0;
      const ygMax = 720;
      const stSplit = 1;
      const ygSplit = 5;
      const data1 = [
        [10.0, 6.33],
        [14.0, 8.96],
        [12.5, 6.82],
        [9.15, 7.2],
        [11.5, 7.2],
        [3.03, 4.23],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [4.05, 4.96],
        [6.03, 7.24],
        [12.0, 6.26],
        [12.0, 8.84],
        [7.08, 5.82],
        [5.02, 5.68],
      ];
      const data2 = [
        [101.0, 62.233],
        [124.0, 81.96],
        [132.5, 62.82],
        [94.15, 72.2],
        [151.5, 73.2],
        [36.03, 42.23],
        [162.2, 73.83],
        [27.02, 43.47],
        [177.05, 33.33],
        [488.05, 34.96],
        [69.03, 73.24],
        [172.0, 62.26],
        [182.0, 82.84],
        [78.08, 53.82],
        [59.02, 52.68],
      ];
      const color1 = "red";
      const color2 = "green";
      // 散点图
      const scatterData = [
        {
          name: "上导X向摆渡",
          data: data1,
          color: color1,
        },
  
        // type 2
        {
          name: "上导X向摆渡峰峰值",
          data: data2,
          color: color2,
        },
 
      ];
      this.selectData = scatterData.map((item) => {
        return {
          name: item.name,
          isCheck: true,
          color: item.color,
        };
      });
      this.options = getOptions({
        stMin,
        stMax,
        ygMin,
        ygMax,
        stSplit,
        ygSplit,
        scatterData,
      });
    },
    checkPointChange(data) {
      console.log("data", data.name);
      data.isCheck = !data.isCheck;
      if (data.isCheck) {
        this.chart.dispatchAction({
          type: "legendToggleSelect",
          name: data.name,
        });
      } else {
        this.chart.dispatchAction({
          type: "legendUnSelect",
          name: data.name,
        });
      }

      // dispatchAction({
      //   type: "legendUnSelect",
      //   // 图例名称
      //   name: string,
      // });
      // data.forEach((item) => {
      //   this.chart.dispatchAction({
      //     type: "legendToggleSelect",
      //     // 图例名称
      //     name: item,
      //   });
      // });
    },
    // 实例化回调
    initedFunction(chart) {
      console.log("测试", chart);
      this.chart = chart;
      chart.on("click", function (params) {
        // 控制台打印数据的名称
        const { data } = params;
        console.log("data", data);
      });
    },
    // 全选
    checkAll() {
      if (!this.chart) return;
      this.selectData.forEach((item) => {
        item.isCheck = true;
      });
      this.chart.dispatchAction({
        type: "legendAllSelect",
      });
    },
    // 反选
    reCheck() {
      if (!this.chart) return;
      this.selectData.forEach((item) => {
        item.isCheck = !item.isCheck;
      });

      this.chart.dispatchAction({
        type: "legendInverseSelect",
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.header-box {
  height: 40px;
  display: flex;
  align-items: center;
  .header-left {
    flex: 1;
    // height: 100%;
  }
  .header-right {
    flex: 1;
    // height: 100%;
  }
}

.body-box {
  width: 100%;
  height: 500px;
  display: flex;

  .echart-box {
    flex: 1;
    // height: 500px;
    height: 100%;
    border: 1px solid #000;
    .btn-box {
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .checkbox-item {
        margin-right: 10px;
      }
    }
    .echart-chart-box {
      height: calc(100% - 30px);
    }
  }
  .point-box {
    width: 400px;
    height: 100%;
    border: 1px solid #000;
    padding: 10px;

    .check-title {
      font-size: 20px;
      margin-bottom: 5px;
    }
    .check-box {
      overflow: auto;
      .check-item {
        height: 30px;
        display: flex;
        align-items: center;
        .color-box {
          width: 20px;
          height: 20px;
          // background-color: red;
          border-radius: 50%;
          margin-right: 10px;
          background-color: gray;
        }
        .name-box {
          font-size: 18px;
          color: #004896;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
